<!-- Left -->

<a
  class="group relative inline-block overflow-hidden border border-indigo-600 px-8 py-3 focus:ring-3 focus:outline-hidden"
  href="#"
>
  <span
    class="absolute inset-y-0 left-0 w-[2px] bg-indigo-600 transition-all group-hover:w-full"
  ></span>

  <span
    class="relative text-sm font-medium text-indigo-600 transition-colors group-hover:text-white"
  >
    Download
  </span>
</a>

<!-- Right -->

<a
  class="group relative inline-block overflow-hidden border border-indigo-600 px-8 py-3 focus:ring-3 focus:outline-hidden"
  href="#"
>
  <span
    class="absolute inset-y-0 right-0 w-[2px] bg-indigo-600 transition-all group-hover:w-full"
  ></span>

  <span
    class="relative text-sm font-medium text-indigo-600 transition-colors group-hover:text-white"
  >
    Download
  </span>
</a>

<!-- Bottom -->

<a
  class="group relative inline-block overflow-hidden border border-indigo-600 px-8 py-3 focus:ring-3 focus:outline-hidden"
  href="#"
>
  <span
    class="absolute inset-x-0 bottom-0 h-[2px] bg-indigo-600 transition-all group-hover:h-full"
  ></span>

  <span
    class="relative text-sm font-medium text-indigo-600 transition-colors group-hover:text-white"
  >
    Download
  </span>
</a>

<!-- Top -->

<a
  class="group relative inline-block overflow-hidden border border-indigo-600 px-8 py-3 focus:ring-3 focus:outline-hidden"
  href="#"
>
  <span
    class="absolute inset-x-0 top-0 h-[2px] bg-indigo-600 transition-all group-hover:h-full"
  ></span>

  <span
    class="relative text-sm font-medium text-indigo-600 transition-colors group-hover:text-white"
  >
    Download
  </span>
</a>
